<template>
	<view class="uiwu-button">
		<view class="uiwu-button-num">编号：{{item.device_info?.device_code}}</view>
		<view class="uiwu-flex-space">
			<view class="operate">
				<zui-joystick :size="100" @direction="direction" @deactive="deactive" />
			</view>
			<view class="start" @tap="TapStart">GO</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { inject, ref } from 'vue'
	const socket = inject<any>('socket')
	const emits = defineEmits(['onStart'])
	const props = defineProps({
		item: {
			default: {},
			type: Object
		},
		isExecute:{
			default:true,
			type:Boolean
		}
	})
	const TapStart = () => {
		if(!props.isExecute) return 
		socket.send(JSON.stringify({
			type: 'deviceControl',
			token: uni.getStorageSync('token'),
			device_id: props.item.device_info.id,
			instruct: 'grab'
		}));
		console.log('执行抓取命令');
		emits('onStart')
	}
	const direction = ({ to }) => {
		if(!props.isExecute) return 
		socket.send(JSON.stringify({
			type: 'deviceControl',
			token: uni.getStorageSync('token'),
			device_id: props.item.device_info.id,
			instruct: to == 'none' ? 'stop' : to
		}));
	}
	const deactive = () => {
		if(!props.isExecute) return 
		socket.send(JSON.stringify({
			type: 'deviceControl',
			token: uni.getStorageSync('token'),
			device_id: props.item.device_info.id,
			instruct: 'stop'
		}));
	}
</script>

<style lang="scss">
	.uiwu-button {
		padding: 0 51rpx;

		.uiwu-button-num {
			font-size: 18rpx;
			font-weight: 500;
			color: #FCE5C7;
			text-align: center;
			margin-bottom: 24rpx;
		}

		.operate {
			width: 200rpx;
			height: 200rpx;
			padding: 10rpx;

			// background:url('../../static/jiantou.png') no-repeat 0 0 / 180rpx 150rpx;
			.yuan {
				width: 100%;
				height: 100%;
				background: url('../../static/yuan1.png') no-repeat 0 0 / 100% 100%;

				image {
					width: 80rpx;
				}
			}
		}

		.right {
			width: 180rpx;
			height: 211rpx;
			background: #F6AA00;
			border-radius: 24rpx;
			padding: 2rpx;

			.image {
				width: 100%;
				height: 176rpx;
				border-radius: 24rpx;
				background-color: #fff;

				image {
					width: 96rpx;
				}
			}

			text {
				font-size: 20rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				line-height: 31rpx;
				margin-top: 2rpx;
			}
		}

		.start {
			width: 256rpx;
			height: 129rpx;
			background: url('../../static/start.png') no-repeat 0 0;
			background-size: 100% 100%;
			text-align: center;
			line-height: 90rpx;
			font-size: 36rpx;
			font-weight: 800;
			color: #FFFFFF;
			text-shadow: 0px 4rpx 0px #4C9F24;
		}
	}
</style>